<template>
  <div class="box">
    <!-- 头部搜索栏 -->
    <headBar
      :userId="headBarInfo.userId"
      :imageUrl="headBarInfo.imageUrl"
      :username="headBarInfo.username"
      @getSonglistId="pushSonglistPage"
      @getAlbumlistId="pushAlbumlistPage"
      @getUserDetailInfo="pushUserDetailPage"
      @getSearchPageInfo="pushSearchPage"
      @getSongerDetailInfo="pushSongerDetailPage"
    ></headBar>

    <!-- 中部左侧功能栏，和右侧详情栏 -->
    <div class="main">
      <!-- 接收来自子组件的值，并进行处理 -->
      <leftBar
        @getUserDate="fetchUserDate"
        @getSonglistId="pushSonglistPage"
        @getCloudPageInfo="pushCloudPage"
        @getFollowPageInfo="pushFollowPage"
        @getFindMusicPageInfo="pushFindMusicPage"
        @getRecentlyPlayPageInfo="pushRecentlyPlayPage"
      ></leftBar>
      <div style="width: 980px; height: 540px; overflow: auto">
        <!-- 为路由添加key，可以重新进入当前路由 -->
        <router-view
          :key="$route.timestamp"
          @getSonglistId="pushSonglistPage"
          @getAlbumlistId="pushAlbumlistPage"
          @getUserDetailInfo="pushUserDetailPage"
          @getFollowsPageInfo="pushFollowsPage"
          @getSongerDetailInfo="pushSongerDetailPage"
          @getFollowedsPageInfo="pushFollowedsPage"
          @getRecommendsongsPageInfo="pushRecommendsongsPage"
        ></router-view>
      </div>
    </div>

    <!-- 底部音乐播放器 -->
    <playBar></playBar>
  </div>
</template>

<script>
import headBar from './viewtemplate/headBar.vue'
import leftBar from './viewtemplate/leftBar.vue'
import playBar from './viewtemplate/playBar.vue'

import { mapState } from 'vuex'

export default {
  components: {
    headBar,
    leftBar,
    playBar,
  },
  data() {
    return {
      // 头部栏参数
      headBarInfo: { userId: '', imageUrl: '', username: '未登录' },
      // 登录后的用户信息
      userInfo: {},
    }
  },
  created() {},
  computed: {
    ...mapState([
      'path',
      'userId',
      'nickname',
      'isActive',
      'isMyself',
      'songerId',
      'songlistId',
      'albumlistId',
      'musicPlayInfo',
      'searchKeyWord',
      'theDetailUserId',
      'theFollowsUserId',
      'theDetailUserName',
      'theFollowedsUserId',
    ]),
  },
  methods: {
    // 子传父处理函数，接收传递过来的用户信息
    fetchUserDate(data) {
      // console.log(data)
      this.userInfo = data.profile
      // console.log(this.userInfo)
      this.setAvatarUrlAndNickName()
    },
    // 登录后设置用户头像和用户昵称
    setAvatarUrlAndNickName() {
      this.headBarInfo.userId = this.userInfo.userId
      this.headBarInfo.imageUrl = this.userInfo.avatarUrl
      this.headBarInfo.username = this.userInfo.nickname
    },

    // 子传父处理函数，接收传递过来的用户歌单相关信息
    // 和跳转到歌单页面
    pushSonglistPage(data) {
      this.$router.push({
        path: this.path,
        timestamp: Date.now(),
      })
    },

    // 子传父处理函数，接收传递过来的用户id
    // 和跳转到最近播放页面的路径
    pushRecentlyPlayPage(data) {
      this.$router.push({
        path: this.path + '?userName=' + this.userInfo.nickname,
        timestamp: Date.now(),
      })
    },

    // 子传父处理函数，接收传递过来的用户id，昵称
    // 和跳转到关注页面的路径
    pushFollowPage(data) {
      this.$router.push({
        path: this.path + '?userName=' + this.userInfo.nickname,
        timestamp: Date.now(),
      })
    },

    // 子传父处理函数，接收传递过来的用户id，昵称
    // 和跳转到关注页面的路径
    pushFollowsPage(data) {
      this.$router.push({
        path: this.path,
        timestamp: Date.now(),
      })
    },

    // 子传父处理函数，接收传递过来的用户id，昵称
    // 和跳转到粉丝页面的路径
    pushFollowedsPage(data) {
      this.$router.push({
        path: this.path,
        timestamp: Date.now(),
      })
    },

    // 子传父处理函数，接收传递过来的用户id
    // 和跳转到我的云盘页面的路径
    pushCloudPage(data) {
      this.$router.push({
        path: this.path + '?userName=' + this.userInfo.nickname,
        timestamp: Date.now(),
      })
    },

    // 子传父处理函数，接收传递过来的用户id
    // 和跳转到用户个人页面的路径
    pushUserDetailPage(data) {
      this.$router.push({
        path: this.path + '?nickName=' + this.theDetailUserName,
        timestamp: Date.now(),
      })
    },

    // 子传父处理函数
    // 和跳转到发现音乐页面的路径
    pushFindMusicPage(data) {
      this.$router.push({
        path: this.path + '?thePage=发现音乐',
        timestamp: Date.now(),
      })
    },

    // 子传父处理函数
    // 和跳转到每日推荐歌曲页面的路径
    pushRecommendsongsPage(data) {
      this.$router.push({
        path: this.path + '?thePage=每日推荐歌曲',
        timestamp: Date.now(),
      })
    },

    // 子传父处理函数，接收传递过来的歌手id
    // 和跳转到歌手详情页面的路径
    pushSongerDetailPage(data) {
      this.$router.push({
        path: this.path + '?thePage=歌手详情页面&歌手id=' + this.songerId,
        timestamp: Date.now(),
      })
    },

    // 子传父处理函数，接收传递过来的歌手专辑相关信息
    // 和跳转到专辑页面
    pushAlbumlistPage(data) {
      this.$router.push({
        path: this.path,
        timestamp: Date.now(),
      })
    },

    // 子传父处理函数，接收传递过来的搜索相关信息
    // 和跳转到搜索结果页面
    pushSearchPage(data) {
      this.$router.push({
        path:
          this.path + '?thePage=搜索结果页面&搜索关键字=' + this.searchKeyWord,
        timestamp: Date.now(),
      })
    },
  },
}
</script>

<style lang="less" scoped>
.box {
  margin: 0 auto;
  width: 1200px;
  box-shadow: 0 2px 17px rgba(0, 0, 0, 0.16), 0 9px 19px rgba(0, 0, 0, 0.08);
}
.main {
  display: flex;
}
</style>